<template>
  <div class="bar-chart-22 chart" ref="barChart22"></div>
</template>

<script setup>
import { ref, onMounted, inject } from "vue";
const barChart22 = ref(null);
const echarts = inject("$echarts");

let yAxisData = ["金鸡湖街道", "胜浦街道", "娄葑街道", "斜塘街道", "唯亭街道"];
let seriesData = [25230, 19520, 18620, 17532, 16420];
let seriesMax = [];
for (let i = 0; i < seriesData.length; i++) {
  seriesMax.push(seriesData[0] + seriesData[0] / 10);
}

const option = {
  compCode: "C202309022",
  backgroundColor: "#000",
  grid: {
    left: "2%",
    right: "5%",
    bottom: "2%",
    top: "2%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    backgroundColor: "#053962", // 设置背景色为半透明红色
    borderColor: "#165e9e", // 设置边框颜色
    borderWidth: 1,
    textStyle: {
      color: "#fff",
    },
    axisPointer: {
      type: "none",
    },
    formatter: function (params) {
      return params[0].name + " : " + params[0].value;
    },
  },
  xAxis: {
    show: false,
    type: "value",
  },
  yAxis: [
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: yAxisData,
    },
    {
      type: "category",
      inverse: true,
      axisTick: "none",
      axisLine: "none",
      show: true,
      axisLabel: {
        textStyle: {
          color: "#ffffff",
          fontSize: "12",
          fontFamily: "DIN",
        },
      },
      data: seriesData,
    },
    {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: [],
    },
  ],
  series: [
    {
      name: "值",
      type: "bar",
      zlevel: 1,
      itemStyle: {
        normal: {
          barBorderRadius: 0,
          color: (params) => {
            let colorArray = [
              {
                top: "rgba(255, 77, 77, 1)",
                bottom: "rgba(11,42,84,.3)",
              },
              {
                top: "rgba(255, 144, 0, 1)",
                bottom: "rgba(11,42,84, 0.3)",
              },
              {
                top: "rgba(255, 236, 77, 1)",
                bottom: "rgba(11,42,84,.3)",
              },
              {
                top: "rgba(0, 162, 255, 1)",
                bottom: "rgba(11,42,84,.3)",
              },
              {
                top: "rgba(0, 96, 255, 1)",
                bottom: "rgba(11,42,84,.3)",
              },
            ];
            let num = colorArray.length;

            return {
              type: "linear",
              colorStops: [
                {
                  offset: 0,
                  color: colorArray[params.dataIndex % num].bottom,
                },
                {
                  offset: 1,
                  color: colorArray[params.dataIndex % num].top,
                },
              ],
              globalCoord: false,
            };
          },
        },
        emphasis: {
          color: function (params) {
            return params.color;
          },
        },
      },
      barWidth: 6,
      data: seriesData,
      yAxisIndex: 0,
    },
    {
      name: "背景",
      type: "bar",
      barWidth: 6,
      barGap: "-100%",
      data: seriesMax,
      itemStyle: {
        normal: {
          color: "rgba(8, 38, 72,1)",
          barBorderRadius: 0,
        },
      },
      yAxisIndex: 1,
    },
    {
      name: "圆",
      type: "scatter",
      hoverAnimation: false,
      data: seriesData,
      yAxisIndex: 2,
      symbolSize: 10,
      itemStyle: {
        normal: {
          color: function (params) {
            let colors = ["#FF4D4D", "#FF9000", "#FFEC4D", "#00A2FF", "#0060FF"];

            return colors[params.dataIndex % colors.length];
          },
          opacity: 1,
        },
      },
      z: 2,
    },
    {
      name: "外圆",
      type: "scatter",
      hoverAnimation: false,
      data: seriesData,
      yAxisIndex: 2,
      symbolSize: 15,
      itemStyle: {
        normal: {
          color: function (params) {
            let colors = ["#FF4D4D", "#FF9000", "#FFEC4D", "#00A2FF", "#0060FF"];

            return colors[params.dataIndex % colors.length];
          },
          opacity: 0.3,
          borderWidth: 1,
        },
      },
      z: 2,
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(barChart22.value);
  chart.setOption(option);
});
</script>

<style scoped></style>
